<!DOCTYPE html>
<html>
<head>


<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="//cdn.bootcss.com/bootstrap-material-design/0.5.10/css/bootstrap-material-design.min.css"
	rel="stylesheet">
<link
	href="//cdn.bootcss.com/bootstrap-material-design/0.5.10/css/ripples.min.css"
	rel="stylesheet">
<link
	href="//cdn.bootcss.com/bootstrap-markdown/2.10.0/css/bootstrap-markdown.min.css"
	rel="stylesheet">

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script
	src="//cdn.bootcss.com/bootstrap-material-design/0.5.10/js/ripples.min.js"></script>
<script
	src="//cdn.bootcss.com/bootstrap-material-design/0.5.10/js/material.min.js"></script>
<title>WebSocket Show Post</title>
<style type="text/css">
#connect-container {
	float: left;
	width: 400px
}

#connect-container div {
	padding: 5px;
}

#console-container {
	float: left;
	width: 800px;
	margin: 0 auto;
}
</style>

<script type="text/javascript">
	var ws = null;
	var url = null;
	var transports = [];

	if (window.location.protocol == 'http:') {
		url = 'ws://' + window.location.host + '/showPost/echo';
	} else {
		url = 'wss://' + window.location.host + '/showPost/echo';
	}

	ws = new WebSocket(url);

	ws.onopen = function() {
		log('connection opened.');
	};
	ws.onmessage = function(event) {
		log(event.data);
	};
	ws.onclose = function(event) {
		log('Info: connection closed.');
		log(event);
	};

	function updateTransport(transport) {
		alert(transport);
		transports = (transport == 'all') ? [] : [ transport ];
	}

	function log(message) {
		$('#console').prepend('<div class="well">' + message + '</div>');
	}

	$(document).ready(function() {
		$.material.init();
	});
</script>
</head>
<body>
	<noscript>
		<h2 style="color: #ff0000">Seems your browser doesn't support
			Javascript! Websockets rely on Javascript being enabled. Please
			enable Javascript and reload this page!</h2>
	</noscript>
	<div class="container" style="margin-top: 10px;">
		<div class="row">
			<div class="col-md-12" id="console"></div>
		</div>
</body>
</html>